<!--售后进度日志-->
<template>
  <view class="afterSalesProgress">
    <view v-for="(item,index) in list" :key="index" class="forBox u-p-b-30" :class="{'fiClass': index === 0}">
      <view class="justify-between items-center">
        <view>
          <view class="fz-14">{{item.title}}</view>
          <view v-if="item.sellerAdderssVO">
            <view class="linh-20">请将商品邮寄到下列地址</view>
            <view class="linh-20">收件人：{{item.sellerAdderssVO.sellerAdderssName}}</view>
            <view class="linh-20">手机号：{{item.sellerAdderssVO.sellerAdderssMobile}}</view>
            <view class="linh-20">收件地址：{{item.sellerAdderssVO.selleraAddress}}</view>
          </view>
        </view>
        <view class="btn" v-if="item.orderShipVO" @click="_goLogistics(item.orderShipVO)">物流详情</view>
        <view class="btn" v-if="item.sellerAdderssVO" @click="_copyMsg(item.sellerAdderssVO)">复制信息</view>
        <view class="times" v-else>{{item.createTime}}</view>
      </view>

      <view class="linh-20 u-p-t-15" v-if="item.orderShipVO && !item.data">暂无物流信息</view>
      <view class="linh-20 u-p-t-15" v-else>{{item.data}}</view>
    </view> 
    <!-- 申请初始数据 -->
    <view class="forBox lastClass" v-show="afterSales.orderAfterSalesInformationVO">
      <view class="justify-between items-center">
        <view class="fz-14">发起申请：{{afterSales.applyType === 1 ? '仅退款' : '退货退款'}}</view>
        <view class="times">{{information.createTime}}</view>
      </view>
      <view class="linh-20 u-p-t-15">退款金额：<text class="themeFontColor">￥{{information.totalApplyAmount}}</text></view>
      <view class="linh-20">退款明细：{{information.goodsName}}({{information.skuName}} * {{information.count}})</view>
      <view class="linh-20">退款原因：{{information.applyReason}}</view>
      <view class="linh-20">申请说明：{{information.description}}</view>
      <view>
        <image :src="item" v-for="(item,idx) in imgList" :key="idx" style="width:180rpx;height:180rpx;margin-right:20rpx;margin-bottom:20rpx;" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    afterSales: { type: Object, default: {} },
  },
  computed: {
    list(){
      return this.afterSales?.sellerOrderAfterSalesLogVOList ?? this.afterSales?.orderAfterSalesLogVOList ?? []
    },
    information(){
      return this.afterSales?.orderAfterSalesInformationVO ?? {}
    },
    imgList(){
      return this.information.pictureJson ? this.information.pictureJson.split(',') : []
    }
  },
  methods:{
    // 跳转去物流详情
    _goLogistics(logis){
      uni.navigateTo({ url: `/pagesA/order/logisticsMode?num=${logis.logisticsCode}&comCode=${logis.logisticsComCode}&locname=${logis.logisticsName}` })
    },
    // 复制收货信息
    _copyMsg(obj){
      uni.setClipboardData({
        data: `${obj.sellerAdderssName}  ${obj.sellerAdderssMobile}  ${obj.selleraAddress}`,
        showToast: false,
        success: function () {
          uni.showToast({
            title: '信息已复制',
            icon: 'success'
          });
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.afterSalesProgress{
  padding: 32rpx;
  color: #969799;
  font-size: 24rpx;
  .forBox {
    position: relative;
    padding-left: 50rpx;
    .times{
      color: rgba(0, 0, 0, 0.16);
    }
    .btn{
      padding: 4rpx 30rpx;
      border: 1px solid #DCDEE0;
      border-radius: 32rpx;
      color: #323233;
    }
    &::before {
      display: block;
      content: " ";
      width: 16rpx;
      height: 16rpx;
      border-radius: 16rpx;
      border: solid 1px #ccc;
      position: absolute;
      left: 0;
      top: 10rpx;
    }
    &::after {
      display: block;
      content: " ";
      width: 1px;
      height: calc(100% - 60rpx);
      background-color: #cccccc;
      position: absolute;
      left: 9rpx;
      top: 40rpx;
    }
  }
  .forBox.fiClass{
    color: $themeColor;
    &::before{
      border: solid 1px $themeColor;
      background-color: $themeColor;
    }
    &::after{
      background-color: $themeColor;
    }
  }
  .forBox.lastClass,.forBox.noneAfter{
    &::after{
      display: none;
    }
  }
}
</style>
